<template>
	<view>
		<uNavbar title="批量挖宝"></uNavbar>
		<view class="saleslist_top flex_ld">
			<view class="sales_l flex_dq">
				<text>默认排序</text>
				<image v-if="state" src="../../static/icon/toppp.png" mode="" @click="changeUp"></image>
				<image v-if="!state" src="../../static/icon/notop.png" mode="" @click="changeUp"></image>
			</view>
			<view class="sales_r flex_dq" @click="changeQuan">
				<image src="../../static/icon/i_checkbox.png" mode="aspectFill"  v-if="isSelect"></image>
				<image src="../../static/icon/i_checkbox1.png" mode="" v-else ></image>
				<text :class="isSelect ?'actives':''">全选</text>
			</view>
		</view>
		<view class="saleslist flex_Z">

			<view class="saleslist_center flex_Z">
				<view class="saleslist_center_box flex_ld" v-for="(item,index) in bulkList" :key="item.id">
					<view class="commodity ">
						<image :src="item.good.goods_image" mode=""></image>
						<text class="texts1">{{item.goods_name}}</text>
						<text class="texts2">{{item.goods_number}}/{{item.good.circulation}}</text>
					</view>
					<view class="selects">
						<image src="../../static/icon/i_checkbox.png" mode="aspectFill"  v-if="item.selected" @click="isClickDuo(item,index)"></image>
						<image src="../../static/icon/i_checkbox1.png" mode="" v-else @click="isClickDuo(item,index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="empty2"></view>
		<view class="btn_qs">
			<view class="log_out  flex_c" :class="selectId.length>0?'':'bgss'" @click="tipShow=true" >
				<image v-if="selectId.length" class="highlights" src="../../static/image/mask.png" mode=""></image>
				<text>挖宝</text>
			</view>

		</view>
		<!-- 支付弹窗 -->
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36" style="color: #262626;">提示</text>
				<text class="prompt_tit">确定要挖宝吗</text>
		
				<view class="prompt_ntm" @click="getstatus()">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="keyboardShow" mode="center" @close="delother,keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="securityPwd" mode="line"  dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="keyboardShow=false,securityPwd=''">
						取消
					</view>
					<view class="other_btn2" @click="valChange()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<noDatas  :xxxList="bulkList" :status="status"></noDatas>
<!-- 		<u-keyboard ref="uKeyboard" dotDisabled mode="number" closeOnClickOverlay :tooltip="false" :show="keyboardShow"
			@close="keyboardShow = false" @change="valChange" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<text>安全密码</text>
				<u-code-input dot space="26" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard> -->
	</view>
</template>

<script>
	import NP from 'number-precision'

	import {
		goodsList,
		updateStatus
	} from "../../api/object.js";
	export default {
		data() {
			return {
			
				ids: '',
				allMoney: 0, //多选的总价
				state: false, //切换
				isSelect: false, //全选多选
				showPay:false, //弹窗
				keyboardShow: false, //输入框
				goumai:false,
				startTime:'',
				endTime:'',
				securityPwd: '', //安全密码
			
				Hallconfig:{}, //配置信息
				guidancePrice:'',//指导价
				handlingFees:'',//交易手续费
				salesDetail: {},
				bulkList: [],
				selectId: [], // 多选的id
				marketAllList: [], //正在出售的商品
				price:"",
				good_price:"",
				config:{},
				isful:false,
				page: 1,
				size: 20,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				tipShow:false
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.initList()
			// this.getresaleConfig()
		},
		computed:{
			// 计算总价
			
				fuls(){
					return NP.round((this.config.sale_goods_ful*this.selectId.length), 2)
				},
			
			daozhangprice() {
				const price = Number(this.good_price)
				const fl = Number(this.config.transaction_fees) / 100
				return (this.roundDown(price - price * fl, 2)).toFixed(2)
			},
		},
		methods: {
			getstatus(){
				updateStatus({
					id:this.selectId.join(","),
					status:1
				}).then(res=>{
					if(res.code==1){
						this.selectId=[]
						this.isSelect=false
						this.tipShow=false
						this.page=1
						this.initList()
					}
					uni.$u.toast(res.msg)
				})
			},
	
			getresaleConfig() {
				resaleConfig().then(res => {
					if (res.code == 1) {
						this.config = res.data
						const timestamp = Math.round(new Date().getTime() / 1000);
						if(timestamp>res.data.sale_goods_ful_time){
							this.isful=true
							
						}else{
							this.isful=false
						}
					}
			
					console.log(res, "配置信息")
				})
			},
			getprice(e) {
				console.log(e,999)
				console.log(e)
				const price1 = Number(e)
				const price2 = Number(this.config.max_price)
				console.log(price1, "输入价格")
				console.log(price2, "最大价格")
				if (price1 > price2  && this.bulkList[0].equity_type!=7) {
					uni.$u.toast("最高价格为" + this.config.max_price)
					
					this.good_price = this.config.max_price
				} else {
					this.good_price = e
				}
			
			},
			roundDown(num, digits) {
				var multiplier = Math.pow(10, digits);
				return Math.floor(num * multiplier) / multiplier;
			},
			// 配置信息
			// 初始化列表
			initList() {
				goodsList({
					page: this.page,
					status: 0
				}).then(res => {
					console.log(res, "列表数据")
					if (res.code == 1) {
						let list = res.data.data;
						this.bulkList = this.page == 1 ? list : this.bulkList.concat(list);
						console.log(this.bulkList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 平台首发创建订单并支付
			isCreateOrder() {
				let data = {
					id: this.selectId.join(),
					price: this.good_price,
					password: this.securityPwd
				}
				uni.showLoading({
					title: '加载中'
				});
				batchRents(data).then(res => {
					console.log(res)
					uni.hideLoading()
					this.securityPwd = ''
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/marketorder/marketorder?id=' + 2
							})
						}, 1500);
					}
				})
			},
			// 多选
			isClickDuo(item, index) {
				// this.temporary = item
				// console.log(item);
				// console.log(index);
				let idIndex = this.selectId.indexOf(item.id);
				console.log(idIndex);
				this.bulkList[index].selected = !this.bulkList[index].selected;
				// 如果点击得已经被勾选
				// ----------------- 当前指导价大于防屯价用防屯价计算，反之用指导价计算 ------------------------
				if (idIndex != -1) {
					//这个返回的是被删除的内容
					this.selectId.splice(idIndex, 1);
					
				} else {
					this.selectId.push(item.id);
				}
				if (this.bulkList.length == this.selectId.length) {
					this.isSelect = true
				} else {
					this.isSelect = false
				}
				console.log(this.selectId);
				
			},
			// 全选 反选
			changeQuan() {
				this.isSelect = !this.isSelect
				if (this.isSelect) {
					this.bulkList.forEach((item, index) => {
						if (!item.selected) {
							this.selectId.push(item.id);
						}
						this.bulkList[index].selected = true;

					})
					console.log(this.selectId);
					
				} else {
					this.bulkList.forEach((item, index) => {
						this.bulkList[index].selected = false;
						this.selectId = [];
					
					})
					console.log(this.selectId);
					
				}
			},

			// 切换
			changeUp() {
				this.state = !this.state
				if (this.state) {
					let newList = this.bulkList.slice().sort((news, olds) => news.goods_number - olds.goods_number)
					this.bulkList = newList
				} else {
					let newList = this.bulkList.slice().sort((news, olds) => olds.goods_number - news.goods_number)
					this.bulkList = newList
				}
			}, 
			// 出售
			clickSell() {
				if(this.selectId.length == 0){
					uni.$u.toast('请选择出售商品')
					return;
				}
				this.showPay = true
			},
			// 确认出售
			isComplete() {
				console.log(this.good_price,this.config.max_price)
				if(this.good_price){
					this.showPay = false
					this.keyboardShow = true
				}else if(Number(this.good_price) > Number(this.config.max_price) ){
					this.good_price=this.config.max_price
					uni.$u.toast("最大价格为"+this.config.max_price)
				}else{
					uni.$u.toast("请输入价格")
				}
				
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length <= 6) {
					uni.$u.toast("交易密码为6位")
					console.log(this.securityPwd);
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					this.isCreateOrder()
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
		},
		// 下拉刷新
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background:#E0DDDA;
	}
</style>

<style scoped lang="scss">
	.saleslist_top{
		width: 750rpx;
		margin: 0 auto;
		position: fixed;
		background:#E0DDDA;
		height: 70rpx;
		z-index: 99;
		padding-bottom: 20rpx;
	}
	.bulk_box {
		width: 690rpx;
		height: 254rpx;
		background: #f2f2f2;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx auto;
	}

	.bulk_l {
		margin: 0 24rpx;
	}

	.bulk_l>image {
		width: 206rpx;
		height: 206rpx;
		border-radius: 16rpx;
	}

.bulk_r {
		width: 350rpx;
		/* background: pink; */
	}

	.bulk_r_top {
		width: 350rpx;
		white-space: nowrap;          /* 防止文本换行 */
		  overflow: hidden;             /* 隐藏超出区域的文本 */
		  text-overflow: ellipsis;      /* 超出部分显示省略号 */
		font-size: 32rpx;
		color: #333;
		/* background: pink; */
	}

	.bulk_r_center {
		width: 95%;
		font-size: 26rpx;
		color: #A6A5AF;
		margin: 16rpx 0;
	}

	.money>image {
		width: 28rpx;
		height: 28rpx;
	}

	.saleslist {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.sales_l {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #333;
	}

	.sales_l>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.sales_r {
		margin-right: 30rpx;
		font-size: 28rpx;
		color: #333;
	}
	.sales_r>image{
		width: 36rpx;
		height: 36rpx;
	}

	.sales_r>text {
		margin-left: 6rpx;
	}

	.saleslist_center {
		margin: 30rpx 0;
	}

	.saleslist_center_box {
		width: 686rpx;
		height: 88rpx;
		background: #f2f2f2;
		border-radius: 20rpx;
		margin: 0 auto 30rpx;
	}
		
	.texts1{
		width: 50%;
		margin-left: 20rpx ;
	}
	.commodity {
		display: flex;
		width: 90%;
		font-size: 28rpx;
		color: #333;
		margin-left: 24rpx;
		align-items: center;
		>image{
			width: 54rpx;
			height: 54rpx;
			// background: #D8D8D8;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}
	
	.commodity>text:nth-child(1) {
		width: 70%;
		margin-left: 20rpx;
	}

	.commodity>text:nth-child(3) {
		width: 30%;
		/* background:skyblue; */
	}

	.commodity_c {
		width: 40%;
		/* background: pink; */
	}
	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}
	.hoarding {
		width: 84rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 8rpx;
	}

	.selects {
		width: 10%;
	}
	.selects>image{
		width: 36rpx;
		height: 36rpx;
	}

	.actives {
		color: #A68A64 !important;
	}

	.log_out {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.bgs{
		
	}
	
	.pay {
		width: 100%;
		background: #E0DDDA;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}
	
	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}
	
	.pay_box {
		width: 694rpx;
		/* height: 300rpx; */
		background: #f2f2f2;
		border-radius: 18rpx;
	}
	
	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}
	
	.pay_box_c>text:nth-child(1) {
		color: #A7A4AD;
	}
	
	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}
	.pay_img{
		width: 32rpx;
		height: 32rpx;
	}
	.rough{
		width: 60%;
		/* background: pink; */
	}
	.pay_btn{
		min-width: 176rpx;
		padding: 4rpx 0;
		background: #A423EA;
		color: #ffffff;
		border-radius:40rpx;
	}
	.pay_btn_l>image{
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	.pay_btn_r>image{
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	.bgss{
		opacity: 0.5;
	}
	.btn_qs{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 140rpx;
		/* background: pink; */
		background:#E0DDDA;
	}
	
	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}
	
	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto ;
	}
	.buyNow>text {
		text-align: center;
		width: 100%;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.nobuyNow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 92%;
		margin: 50rpx auto;
		padding: 20rpx 0;
		border-radius:40rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		opacity: 0.5;
	}
	.nobuyNow>text{
		margin: 0 10rpx;
	}
	
	.keyboardss {
		width: 690rpx;
		margin: 20rpx auto;
	}

	
	/deep/.u-code-input {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		margin: 20rpx 0;
		/* background: pink; */
	}
	/deep/.u-code-input__item{
		margin-right: 0px !important;
	}
	/deep/.u-count-down__text {
		color: #ffffff !important;
		opacity: 0.5;
	}
	
	.p_wrap {
	
		display: flex;
		align-items: center;
		position: relative;
	
		>image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
	
		}
	
		.input {
			width: 160rpx;
			// padding-left: 50rpx;
			text-align: left;
			font-family: 'iconfont2';
			// font-size: 36rpx;
			border: none;
			border-bottom: 2rpx solid #dedede;
			color: #666 !important;
		}
	}	
	/deep/.uni-input-input{
			color: #666 !important;
			font-size: 30rpx;
	}		
	.tips {
		width: 694rpx;
		/* height: 328rpx; */
		background: #f2f2f2;
		border-radius: 18rpx;
		margin: 30rpx 0;
		padding-bottom: 20rpx;
	}
	
	.tips>text {
		margin: 28rpx;
	}
	
	.tips_box {
		padding: 0 28rpx;
		font-size: 28rpx;
		color: #A7A4AD;
	}
	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
</style>